<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>分类检索</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/search.css?v=2.0" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<script>
			// 重写注入代码的方法，让注入代码使用此方法时出错
			String.fromCharCode = function(arg) {return true}
		</script>
	</head>

	<body>
		<div id="vue-container" class="container">
			<div class="top_1">
				<div class="left">
					<a href="javascript:history.back(-1);"><img src="img/back.png"><span>分类</span></a>
				</div>
				<div class="right">
					<a href="index.html?love2"><span>书城</span><img src="img/home.png"></a>
				</div>
			</div>
			<div class="top">
				
				<!--分类-->
				<div class="fenlei">
					<div class="all" @click="search_all()" :class="search.sex===0?'dianji':''">全部</div>
					<div class="boy" @click="search_sex(1)" :class="search.sex===1?'dianji':''">男生频道</div>
					<div class="girl" @click="search_sex(2)" :class="search.sex===2?'dianji':''">女生频道</div>
				</div>
				<div class="classify">
					<div @click="search_sub()" :class="search.tag_id===0?'dianji':''">全部分类</div>
					<div v-for="tag in show_tags" @click=search_tag(tag.ID) :class="search.tag_id===tag.ID?'dianji':''">{{tag.Name}}</div>
				</div>
				<!--选项-->
				<div class="state">
					<div @click="search_finished(0)" :class="search.finished===0?'dianji':''">全部</div>
					<div @click="search_finished(2)" :class="search.finished===2?'dianji':''">连载中</div>
					<div @click="search_finished(1)" :class="search.finished===1?'dianji':''">已完结</div>
				</div>
			</div>
			<div class="content">
				<!--书籍显示-->
				<div class="intro" v-for="book in books">
					<a :href="'book_details.html?id=' + book.ID">
						<div class="intro_tu">
							<img :src="init_image(book.Image)">
						</div>
						<div class="intro_right">
							<p class="intro_title">{{book.Title}}</p>
							<p class="intro_intro">{{book.Description}}</p>
							<span class="intro_fenlei">{{get_tag_name(book.TagID)}}</span>
						</div>
					</a>
				</div>
			</div>
			<div class="see_more" @click="next_serach">
				点击查看更多
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/local.js" ></script>
	<script>
		//		var host = "http://" + location.host;
		$(window).scroll(function() {
				if($(document).scrollTop() >= $(".header").height()) {
					$(".header").addClass("header2");
				}
				if($(document).scrollTop()<$(".header").height()){
					$(".header").removeClass("header2")
				}
			}
		)
		new Vue({
			el: "#vue-container",
			data: {
				search: {
					title:"",
					offset: 0,
					limit: 15,
					finished: 0, // 0 不选择 1 已完结 2 未完结
					sex: 0, // 0 不选择 1 男生 2 女生
					tag_id: 0, // 标签 ID 
				},
				tags: [], // 所有的分类列表
				show_tags: [], // 显示分类列表
				books: [], // 显示的图书列表
			},
			created: function() {
				let self = this;

				$.get(host + "/book-tags", function(data) {
					if(!!data.list) {
						self.tags = data.list;
						self.show_tags = data.list
					}
				})
				this.start_search();
			},
			methods: {
				// 开始搜索
				start_search: function(push) {
					let self = this;
					this.books
					let url = host + "/books?Offset=" + self.search.offset + "&Limit=" +
						self.search.limit + "&Finished=" + self.search.finished + "&Sex=" + self.search.sex +
						"&TagID=" + self.search.tag_id;
					$.get(url, function(data) {
						if(!!data.list.length) {
							if(!!push) {
								for(let i = 0, ln = data.list.length; i < ln; i++) {
									self.books.push(data.list[i])
								}
							} else {
								self.books = data.list;
							}
						} else {
							alert("没有更多图书了哦");
						}
					})
				},
				search_finished: function(finished) {
					this.search.finished = finished;
					this.start_search();
				},
				search_all: function() {
					this.search = {
						offset: 0,
						limit: 15,
						finished: 0, // 0 不选择 1 已完结 2 未完结
						sex: 0, // 0 不选择 1 男生 2 女生
						tag_id: 0, // 标签 ID 
					}
					this.show_tags = this.tags;
					this.start_search();
				},
				search_sub: function() {
					this.search = {
						offset: 0,
						limit: 15,
						finished: 0,
						sex: this.search.sex,
						tag_id: 0,
					}
					this.start_search();
				},
				search_tag: function(tag_id) {
					this.search.tag_id = tag_id;
					this.start_search();
				},
				init_image: function(url) {
					return host + "/" + url
				},
				get_tag_name: function(tag_id) {
					for(let i = 0, ln = this.tags.length; i < ln; i++) {
						let tag = this.tags[i];
						if(tag.ID === tag_id) {
							return tag.Name
						}
					}
				},
				search_sex: function(sex) {
					this.search.tag_id = 0;
					this.search.sex = sex;
					this.show_tags = [];
					for(let i = 0, ln = this.tags.length; i < ln; i++) {
						let tag = this.tags[i];
						if(tag.Sex === sex) {
							this.show_tags.push(tag)
						}
					}
					this.start_search()
				},
				next_serach: function() {
					this.search.offset += this.search.limit;
					this.start_search(true);
				}
			}
		})
	</script>
	<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "https://hm.baidu.com/hm.js?055cff4356b44984f650fdfa60a0cee6";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
	</script>
</html>